<div class="search-bar">

    <div class="right-top-panel">
        <div class="add-filter-menu">
            <div dropdown class="dropdown">
                <span data-toggle="dropdown" dropdownToggle class="add-filter-button">
                    + Add filter
                </span>

                <div *dropdownMenu class="dropdown-menu dropdown-menu-right">
                    <a id="add-date-filter" class="dropdown-item" href="#"
                       *ngIf="!filterPanelStateService.getFilterState().date && filterPanelStateService.activeFilterEditors.dateRange"
                       (click)="filterPanelStateService.addDateFilter()">
                        Date filter
                    </a>
                    <a id="add-thread-filter" class="dropdown-item" href="#"
                       *ngIf="!filterPanelStateService.getFilterState().thread && filterPanelStateService.activeFilterEditors.thread"
                       (click)="filterPanelStateService.addThreadFilter()">
                        Thread filter
                    </a>
                    <a id="add-stacktrace-filter" class="dropdown-item" href="#"
                       *ngIf="!filterPanelStateService.getFilterState().exceptionsOnly"
                       (click)="filterPanelStateService.addStacktraceFilter()">
                        Events containing a stacktrace
                    </a>
                    <a id="add-text-filter" class="dropdown-item" href="#"
                       (click)="filterPanelStateService.addTextFilter()">
                        Text filter
                    </a>
                    <a id="add-js-filter" class="dropdown-item" href="#"
                       (click)="filterPanelStateService.addJsFilter()">
                        JavaScript filter
                    </a>
                </div>
            </div>
        </div>

        <div *ngIf="logs" dropdown class="dropdown top-panel-dropdown file-list-block">
            <span id="file-stat-dropdown" data-toggle="dropdown" dropdownToggle>
                <span *ngIf="vs.filesValidCount < logs.length">
                    <span id="successFileCount" class="has-problems-files" title="Successfully opened files">{{vs.filesValidCount}}</span>
                    /
                </span>
                <span id="totalFileCount" title="Merged file count">{{logs.length}}</span>
                {{logs.length === 1 ? 'log' : 'logs'}}
                <i class="fas fa-caret-down"></i>
            </span>
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
                <lv-log-list-panel [logs]="logs" (addLogClicked)="showOpenLogDialog()"></lv-log-list-panel>
            </div>
        </div>

        <div class="dropdown" dropdown>
            <img id="menu-icon" src="img/menu.png" dropdownToggle data-toggle="dropdown" role="button" title="Menu" alt="menu">
            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="menu-icon">
                <a href="javascript:void(0)" class="dropdown-item" [routerLink]="['/']">File browser</a>

                <a href="javascript:void(0)" id="add-log-menu-item" class="dropdown-item" (click)="showOpenLogDialog()">Add log to the view</a>

                <a href="javascript:void(0)" id="copyPermalink" class="dropdown-item" (click)="copyPermalink()">Permalink to the current position</a>
                
                <a href="javascript:void(0)" *ngIf="fwService.editable && logs?.length === 1" class="dropdown-item"
                   (click)="addToFavorites()">
                    <span class="fa fa-star favorite-icon" [class.in-favorites]="inFavorites"></span>
                    {{inFavorites ? 'Remove from' : 'Add this log to'}} favorites
                </a>

                <a href="javascript:void(0)" *ngIf="logs?.length" id="download-menu-item" class="dropdown-item"
                   (click)="modalWindow = 'download'">
                    Download
                </a>
            </div>
        </div>
    </div>

    <div class="left-top-panel">
        <div class="search-field">
            <div class="input-group">
                <input id="filterInput" type="text"
                       class="form-control"
                       placeholder="search..."
                       [title]="searchRegexError ? searchRegexError : ''"
                       [class.search-invalid-regex]="searchRegexError"
                       (keyup)="filterInputKeyUp($event)"
                       (keydown)="filterInputKeyDown($event)">

                <div class="input-group-append">
                <span id="match-cases"
                      class="input-group-text search-option" title="Match Case"
                      (click)="caseSensitiveClick()"
                      [class.search-option-selected]="searchMatchCase">
                    <i class="fab fa-behance"></i>

                    <div class="search-option-highlighter"></div>
                </span>
                </div>
                <div class="input-group-append">
                <span id="match-regex"
                      class="input-group-text search-option" title="Regexp mode"
                      (click)="regexModeClick()"
                      [class.search-option-selected]="searchRegex">
                    <i class="far fa-registered"></i>

                    <div class="search-option-highlighter"></div>
                </span>
                </div>
            </div>
        </div>

        <img *ngIf="!searchHideUnmatched" alt="prev"
             id="findPrevArrow" src="img/previousOccurrence.png" title="Previous Occurrence (Shift+F3)"
             class="toolIcon" [class.tooliconDisabled]="!searchPattern"
             (click)="findNext(-1)">
        <img *ngIf="!searchHideUnmatched" alt="next"
             id="findNextArrow" src="img/nextOccurrence.png" title="Next Occurrence (F3)"
             class="toolIcon" [class.tooliconDisabled]="!searchPattern"
             (click)="findNext(1)">

        <span *ngIf="searchHideUnmatched" id="applySearchFilterBlock">
            <img id="applySearchFilter" src="img/apply-search-filter.png" alt="apply change" width="20" title="Apply filter (F3)"
                 class="toolIcon" [class.tooliconDisabled]="!appliedFilterOutdated()"
                 (click)="applySearchFilter()">

            <img src="img/nextOccurrence.png" class="toolIcon" alt="next" style="visibility: hidden;">
        </span>

        <input id="hide-unmatched" type="checkbox"
               [(ngModel)]="searchHideUnmatched" (ngModelChange)="hideUnmatchedChanged()"> <label for="hide-unmatched"
                                                                                                  class="non-bold-label">Hide
        unmatched</label>
    </div>

    <lv-top-filter></lv-top-filter>
</div>

<div #logPane id="logPane" (wheel)="wheelRoll($event)" [class.state-opened]="state === 0"
     (touchmove)="onTouchMove($event)" (touchstart)="onTouchStart($event)" (touchend)="onTouchEnd($event)" (touchcancel)="onTouchEnd($event)">

    <div *ngIf="state === 1" class="loading-placeholder">
        <span><img src="assets/progress.gif" alt="..."> Loading...</span>
    </div>

    <div id="heightLimiter" [style.display]="vs.filesValidCount === 0 ? 'none' : 'block'">
        <div #logView id="logView">
            <div #loadingProgressTop id="loading-progress-top">
                <img src="img/loader13.gif" alt="loading...">
            </div>

            <div #records id="records" (click)="clickRecord($event)" (contextmenu)="contextMenu($event)"></div>
        </div>

        <div *ngIf="hasRecordAfter" id="loading-progress-bottom">
            <img src="img/loader13.gif" alt="loading...">
        </div>

        <div *ngIf="!hasRecordAfter && (hasRecordBefore || m.length > 0)" class="log-end"> ---------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end
            ------------------------------- end ------------------------------- end -------------------------------
            end ------------------------------- end ------------------------------- end --------------
        </div>
    </div>

    <div *ngIf="logs && state === 0 && (!hasRecordAfter && !hasRecordBefore && m.length === 0 || vs.filesValidCount === 0)" class="empty-log-message-container">
        <div *ngIf="logs.length === 0" class="empty-log-message-container">
            <div id="no-log-paths" class="empty-log-message" style="font-size: 24px;">
                Log path is not specified. You can select log in <a href="javascript:void(0)" [routerLink]="['/']">file browser</a>
            </div>
        </div>

        <div *ngIf="logs.length > 0" class="empty-log-message">
            <span *ngIf="vs.filesErrorCount === 0">
                <span *ngIf="vs.filesValidCount === 0" class="no-record-msg">
                    Log file does not exist
                </span>
                <span *ngIf="vs.filesValidCount > 0">
                    <span *ngIf="vs.size === 0" class="no-record-msg">Log is empty</span>
                    <span *ngIf="vs.size > 0" class="no-record-msg">All records filtered</span>
                </span>
            </span>
            <span *ngIf="vs.filesErrorCount > 0">
                <span *ngIf="vs.filesValidCount > 0" class="no-record-msg">No record to display</span>
                <span *ngIf="vs.filesValidCount === 0" class="no-record-msg"
                      style="color: #a22;">Failed to read log</span>
            </span>
        </div>

        <div *ngIf="logs.length > 0" class="file-list">
            <div>
                <table>
                    <tr *ngFor="let l of logs">
                        <td>
                            {{l.node}}
                        </td>
                        <td>
                            {{l.path}}
                        </td>
                        <td>
                            <lv-file-status [status]="vs.statuses[l.id]" [showErrorMessages]="true"></lv-file-status>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div *ngIf="modalWindow" [ngSwitch]="modalWindow" class="sl-overlay">
    <div *ngIf="modalWindow !== 'transparent'" class="modal-background sl-overlay"></div>

    <div *ngSwitchCase="'findProgress'" class="sl-dialog sl-dialog-small">
        <div style="display: table; width: 100%; height: 100%; text-align: center;">
            <div style="display: table-cell; vertical-align: middle;">
                <img src="assets/progress.gif" alt="..."> search... <a href="javascript:void(0)" (click)="cancelSearch()">cancel</a>
            </div>
        </div>
    </div>

    <div *ngSwitchCase="'filterChanging'" class="sl-dialog sl-dialog-small">
        <div style="display: table; width: 100%; height: 100%; text-align: center;">
            <div style="display: table-cell; vertical-align: middle;">
                <img src="assets/progress.gif" alt="..."> applying filters ...
            </div>
        </div>
    </div>

    <div *ngSwitchCase="'disconnected'" class="sl-stretchable-dialog">
        <div>
            <div class="disconnect-dialog">
                <div [innerHTML]="disconnectMessage"></div>
                <div *ngIf="backendErrorStacktrace" class="internal-error-stacktrace">{{backendErrorStacktrace}}</div>
            </div>
        </div>
    </div>

    <div *ngSwitchCase="'brokenLink'" class="sl-dialog sl-dialog-small">
        <div style="padding: 10px 20px 0 20px;">
            <div style="display: table; width: 100%; height: 100%; text-align: center;">
                <div style="display: table-cell; vertical-align: middle;">
                    Failed to restore position by permalink, may be log file has been rewritten.<br>
                    <button id="brokenLinkGoTail" class="btn btn-primary" (click)="goToTailAfterBrokenLink()">Open log tail</button>
                </div>
            </div>
        </div>
    </div>

    <div *ngSwitchCase="'filter-error'" id="filter-error-modal" class="sl-dialog sl-dialog-big p-2">
        <div class="d-flex justify-content-end">
            <button id="close-filtering-error-dialog" class="btn btn-link" (click)="modalWindow = null">Close</button>
        </div>

        <div class="filter-error-text">
            Filter error: {{filterErrorText}}
        </div>
    </div>

    <div *ngSwitchCase="'event-details'" class="sl-dialog sl-dialog-big p-2" style="overflow-y: scroll;">
        <div class="d-flex justify-content-end">
            <button class="btn btn-link" (click)="modalWindow = null">Close</button>
        </div>

        <lv-event-details [record]="recordWithDetails"></lv-event-details>
    </div>

    <div *ngSwitchCase="'open-log'" class="sl-dialog sl-dialog-big p-2" style="overflow-y: scroll;">
        <div class="d-flex justify-content-end">
            <button class="btn btn-link" (click)="modalWindow = null">Close</button>
        </div>

        <lv-navigator (openFile)="addNewLog($event)"></lv-navigator>
    </div>

    <div *ngSwitchCase="'download'" id="download-dialog" class="sl-dialog p-2">
        <div class="d-flex justify-content-end">
            <button class="btn btn-link" (click)="modalWindow = null">Close</button>
        </div>

        <lv-download-dialog [logs]="logs" [effectiveFilters]="effectiveFilters">

        </lv-download-dialog>
    </div>
</div>

<context-menu menuClass="log-ctx-menu" #eventContextMenu>
    <ng-template [visible]="contextMenuHandler.isTextMenuItemVisible" let-item contextMenuItem [subMenu]="textMenu">
        <span>Text: <mark>{{item.selectedTextVisible}}</mark>&nbsp;&nbsp;</span>
    </ng-template>

    <ng-template [visible]="contextMenuHandler.isDateMenuItemVisible" contextMenuItem
                 (execute)="contextMenuHandler.hideEventsByTimestamp($event.value.record, false)">
        Hide events older than current
    </ng-template>
    <ng-template [visible]="contextMenuHandler.isDateMenuItemVisible" contextMenuItem
                 (execute)="contextMenuHandler.hideEventsByTimestamp($event.value.record, true)">
        Hide events newer than current
    </ng-template>

    <ng-template [visible]="contextMenuHandler.isThreadMenuItemVisible" let-item contextMenuItem [subMenu]="threadMenu">
        <span class="menu-item-thread">Thread: <mark>{{item.thread}}</mark>&nbsp;&nbsp;</span>
    </ng-template>

    <ng-template contextMenuItem (execute)="showEventDetails($event.value.record)">
        Event details
    </ng-template>

    <ng-template [visible]="contextMenuHandler.isTextSelected" contextMenuItem divider="true"></ng-template>

    <ng-template [visible]="contextMenuHandler.isTextSelected" contextMenuItem
                 (execute)="contextMenuHandler.copyToClipboard()">
        Copy
    </ng-template>

</context-menu>

<context-menu #textMenu>
    <ng-template contextMenuItem let-item (execute)="contextMenuHandler.filterByText($event.value.selectedText, false)">
        <span>Only events containing <mark>{{item.selectedTextVisible}}</mark></span>
    </ng-template>

    <ng-template contextMenuItem let-item (execute)="contextMenuHandler.filterByText($event.value.selectedText, true)">
        <span>Hide events containing <mark class="menu-item-text">{{item.selectedTextVisible}}</mark></span>
    </ng-template>
</context-menu>

<context-menu #threadMenu>
    <ng-template contextMenuItem let-item (execute)="contextMenuHandler.filterByThread($event.value.thread)">
        <span>Show only <mark>{{item.thread}}</mark></span>
    </ng-template>
    <ng-template contextMenuItem let-item [visible]="contextMenuHandler.hasThreadGroup"
                 (execute)="contextMenuHandler.filterByThread($event.value.threadGroup)">
        <span>Show only <mark [innerHTML]="item.threadGroupHtml"></mark></span>
    </ng-template>
    <ng-template contextMenuItem let-item (execute)="contextMenuHandler.excludeThread($event.value.thread)">
        <span>Hide <mark class="menu-item-thread">{{item.thread}}</mark></span>
    </ng-template>
    <ng-template contextMenuItem let-item [visible]="contextMenuHandler.hasThreadGroup"
                 (execute)="contextMenuHandler.excludeThread($event.value.threadGroup)">
        <span>Hide <mark [innerHTML]="item.threadGroupHtml"></mark></span>
    </ng-template>
</context-menu>
